<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>v-for实例化及排序</title>
	</head>

	<body>
		<div id="app">
			<h3>v-for实例化及排序</h3>
			<hr />
			<ul>
				<li v-for="num in arr">{{num}}</li>
			</ul>
			<hr />
			<ul>
				<li v-for="num in numSort">{{num}}</li>
			</ul>
			<hr />
			<ul>
				<li v-for="item in numSize">{{item.name}}---{{item.age}}</li>
			</ul>
		</div>
		<script src="../assets/js/vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					arr: [45, 14, 36, 85, 12, 55, 96, 85, 9],
					arrSort: [45, 14, 36, 85, 12, 55, 96, 85, 9],
					students: [{
							name: 'jack',
							age: 38
						},
						{
							name: 'tom',
							age: 12
						},
						{
							name: 'nick',
							age: 8
						},
						{
							name: 'jim',
							age: 58
						},
						{
							name: 'lily',
							age: 45
						}
					]
				},
				computed: {
					numSort: function() {
						return this.arrSort.sort(sortNum);
						//return this.arrSort.sort(); vue不支持sort对编译数组，sort只能两位以上的书，按第一位进行排序
						//	return [45,14,36,85,12,55,96,85,9];
					},
					numSize: function() {
						return sortByKey(this.students,'age')
					}
				}
			})
			//简单的数组进行排序
			function sortNum(a, b) {
				return a - b;
			}
			//数组对象方法排序:
			function sortByKey(array, key) {
				return array.sort(function(a, b) {
					var x = a[key];
					var y = b[key];
					return((x < y) ? -1 : ((x > y) ? 1 : 0));
				});
			}
		</script>
	</body>

</html>